<template>
  <view class="container">
    <!-- 商品图片 -->
    <!-- :style="{'background-image': 'url('+host+concertDetail.icon+')'}" -->
    <view class="product-image">
      <view class="product-image-box">
        <view class="product-image-box-swiper">
          <swiper class="swiper" :indicator-dots="indicatorDots" :circular="circular" :vertical="vertical"
            :autoplay="autoplay" indicator-active-color="#ffffff" indicator-color='rgba(238,238,238,1)'
            :interval="interval" :duration="duration">
            <swiper-item v-for="(item, index) in concertDetail.pictures" :key="index">
              <image class="product-image-box-img" :src="host + item" mode="aspectFill"
                style="width: 170rpx; height: 220rpx; " />
            </swiper-item>
          </swiper>
          <!-- <image class="product-image-box-img" :src="host+concertDetail.icon" mode="aspectFill"></image> -->
        </view>

        <view class="product-image-r">
          <view class="product-image-r-title">
            {{ concertDetail.name }}
          </view>
          <!-- <view class="product-image-r-time" v-if="concertDetail&&concertDetail.specificationInventories&&concertDetail.specificationInventories.specificationConditions">
						{{concertDetail.specificationInventories.specificationConditions?concertDetail.specificationInventories.specificationConditions.join(' '):''}}
					</view>
					<view class="product-image-r-info">
						以现场为准
					</view> -->
        </view>
      </view>
    </view>
    <view class="container-box">
      <view style="padding-top: 10px;"></view>
      <!-- 商品标题和价格 -->
      <view class="product-info">
        <view class="product-info-l">
          <view class="product-price">￥<text class="plan-price-text">{{ concertDetail.currentLowestUnitPrice / 100
              }}</text> 起</view>
          <view class="product-title">{{ concertDetail.region }}</view>
          <view class="product-tag">{{ concertDetail.tags ? concertDetail.tags.join(' ') : '-' }}</view>
        </view>
        <view class="product-info-r">
          <button class="xcxkf" hover-class="none" open-type="share">
            <image class="product-info-r-img" src="@/static/img/share.png" mode="aspectFill"></image>
          </button>
        </view>
      </view>
      <!-- <view class="lanmu"
				v-if="concertDetail&&concertDetail.specificationInventories&&concertDetail.specificationInventories.specificationConditions">
				{{concertDetail.specificationInventories.specificationConditions?concertDetail.specificationInventories.specificationConditions.join(' '):''}}
			</view> -->
      <view class="collect">
        <!-- <view class="collect-top">
					<i>关注</i>
				</view> -->
        <view class="collect-center">
          <view class="collect-center-num">{{ concertDetail.collectedAmount }}<text
              class="collect-center-num-text">人关注</text></view>
          <view class="collect-center-btn" @click="setCollectFun()">
            <text :class="['iconfont', concertDetail.collected ? 'icon-shoucang1' : 'icon-shoucang']"></text>
            {{ concertDetail.collected ? '已关注' : '关注' }}
          </view>
        </view>
        <swiper class="swiper1" :indicator-dots="indicatorDots1" :circular="circular1" :vertical="vertical1"
          :autoplay="autoplay1" indicator-active-color="#ffffff" indicator-color='rgba(238,238,238,1)'
          :interval="interval1" :duration="duration1">
          <swiper-item v-for="(item, index) in NewsList" :key="index">
            <view class="swiper1View">
              {{ item.title }}
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!-- 产品参数 -->
      <view class="" v-if="concertDetail.guarantees && concertDetail.guarantees.length > 0">
        <view class="like">
          <view class="like-tittle">
            商品保障·特色服务体险
            <!-- <view class="like-tittle-text" @click="openDesc()">
							查看全部
						</view> -->
          </view>
          <view class="like-desc">
            <view class="like-desc-box" v-for="item, index in concertDetail.guarantees" :key="index">
              <view class="like-desc-box-t">
                {{ item.name }}
              </view>
              <view class="like-desc-box-b">
                {{ item.content }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="" v-if="concertDetail.parameters && concertDetail.parameters.length > 0">
        <view class="like">
          <view class="like-tittle">
            产品参数
            <!-- <view class="like-tittle-text" @click="openDesc()">
							查看全部
						</view> -->
          </view>
          <view class="like-desc">
            <view class="like-desc-box" v-for="item, index in concertDetail.parameters" :key="index">
              <view class="like-desc-box-t">
                {{ item.name }}
              </view>
              <view class="like-desc-box-b">
                {{ item.content }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 参数结束 -->
      <view class="detail">
        <view class="detail-title">
          产品介绍
        </view>
        <view class="detail-box">
          <!-- <view class="" v-html="concertDetail.description"></view> -->
          <!-- <u-parse :content="concertDetail.description" @preview="preview" ></u-parse> -->
          <mp-html :content="concertDetail.description" />
        </view>
      </view>
      <view style="display: none;">
        <!-- 商品规格选择 -->
        <view class="product-specs">
          <text class="specs-title">选择规格</text>
          <view class="specs-list">
            <text v-for="(spec, index) in product.specs" :key="index"
              :class="['spec-item', { active: selectedSpec === spec }]" @click="selectSpec(spec)">
              {{ spec }}
            </text>
          </view>
        </view>

        <!-- 购买数量 -->
        <view class="product-quantity">
          <text class="quantity-title">购买数量</text>
          <view class="quantity-control">
            <text class="quantity-btn" @click="decreaseQuantity">-</text>
            <text class="quantity-value">{{ quantity }}</text>
            <text class="quantity-btn" @click="increaseQuantity">+</text>
          </view>
        </view>

        <!-- 运费信息 -->
        <view class="shipping-info">
          <text class="shipping-title">运费</text>
          <text class="shipping-value">¥{{ product.shipping }}</text>
        </view>
      </view>

      <!-- 购买按钮 -->
      <view class="bottom-menu">
        <view class="" style="flex: 1;display: flex;">
          <view class="menu-item" @click="goHome">
            <text class="iconfont icon-home"></text>
            <text class="menu-text">首页</text>
          </view>
          <view :class="['menu-item', { 'menu-item-active': concertDetail.collected }]" @click="setCollectFun()">
            <text :class="['iconfont', concertDetail.collected ? 'icon-shoucang1' : 'icon-shoucang']"></text>
            <text class="menu-text">收藏</text>
          </view>
          <!-- <view class="menu-item" @click="goCart">
						<text class="iconfont icon-gouwuchekong"></text>
						<text class="menu-text">购物车</text>
						<text class="spec-text-sum" v-if="goodsCount>0">{{goodsCount}}</text>
					</view> -->
        </view>
        <view class="menu-action">
          <!-- <button class="add-cart-btn btn-class" @click="handleAdd">加入购物车</button> -->
          <button class="add-cart-btn btn-class" @click="handleBuy">立即下单</button>
        </view>
      </view>
    </view>

    <!-- 加购弹窗规格选择模式(0:捆绑组合模式 1:单独并行模式),  -->
    <likeModel0 ref="likeModel0" @closeBtn="closeBtn" @submitBtn="submitBtn" />
    <likeModel1 ref="likeModel1" @closeBtn="closeBtn" @submitBtn="submitBtn" />
    <info ref="info" />
    <spec ref="spec" />
    <!-- #ifdef MP-WEIXIN -->
    <get-number v-if="showPhone" />
    <!-- #endif -->
  </view>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import likeModel0 from './component/lickModel/likeModel0.vue'
import likeModel1 from './component/lickModel/likeModel1.vue'
import info from './component/lickModel/info.vue'
import spec from './component/lickModel/spec.vue'
export default {
  components: {
    likeModel1,
    likeModel0,
    info,
    spec,
  },
  data() {
    return {
      host: this.$apiFun.host,
      showPhone: false,
      concertDetail: {
        parameters: [],
        pictures: []
      },
      id: '', //商品id
      NewsList: [{
        title: '人气飙升中'
      }, {
        title: '标记收藏让我更懂你'
      }],

      // 主图 轮播
      indicatorDots: false,
      autoplay: true,
      vertical: false,
      interval: 5000,
      duration: 1000,
      circular: true,

      // 多少人想看的 轮播
      indicatorDots1: false,
      autoplay1: true,
      vertical1: true,
      interval1: 5000,
      duration1: 1000,
      circular1: true,
      product: {
        image: 'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg', // 商品图片
        title: '[南宁][送机酒保障/酒店权益][强实名/有条件退款]周杰伦2025“嘉年华”世界巡回演唱会', // 商品标题
        price: 99.9, // 商品价格
        specs: ['黑色', '白色', '灰色', '蓝色'], // 商品规格
        shipping: 10, // 运费
        time: '2025.04.12'
      },
      // 菜单项数据
      menuItems: [{
        id: 0,
        name: '参数:商品规格 商品服务..',
        path: '/page_wallet/qualificationInfo',
        icon: 'icon-suo',
      },
      {
        id: 1,
        name: '保障:商品保障·特色服务体险',
        icon: 'icon-iconmanzutiaojian',
      },
        // {
        // 	id: 2,
        // 	name: '规格·参数·类型',
        // 	icon: 'icon-yaoqing',
        // },
      ],
      selectedSpec: '', // 选中的规格
      quantity: 1, // 购买数量
      goodsCount: 0, //购物车加购总数量
      TicketStr: [],
    };
  },
  computed: {
    //login_status 0 未登录 、1临时微信登录 2已登录
    ...mapGetters([
      'login_status',
      'userInfo',
      'configObj'
    ])
  },
  onLoad(option) {
    this.id = option.id
    this.dictionary()
    this.init()
    this.goodsCountApiFun()
  },
  methods: {

    async init() {
      let data = await this.$apiFun.getApi(
        this.$api.goodsDetailApi, {
        goodsId: this.id
      }
      )
      let imgDom = '<img style="width:100%!important;height:auto!important;" show-menu-by-longpress="{{true}}" mode="widthFix" src="'
      data.description = data.description.replace(/<img src="/gi, imgDom)
      let srcs = 'src="' + this.host + '/'
      data.description = data.description.replace(/src="/gi, srcs)
      console.log('data.description', data.description)
      this.concertDetail = data
    },
    // 票务字典
    async dictionary() {
      let data = await this.$apiFun.getApi(this.$api.configInfoApi, {
        itemKey: 'ticket_specification_matching_names',
      })
      this.TicketStr = JSON.parse(data.value)
    },
    async goodsCountApiFun() {
      let data = await this.$apiFun.postApi(
        this.$api.goodsCountApi
      )
      this.goodsCount = data
    },
    // 
    preview() {

    },
    setCollectFun() {
      uni.showLoading()
      if (this.concertDetail.collected) {
        this.uncollectFun()
      } else {
        this.collectFun()
      }
    },
    // 收藏商品
    async collectFun() {
      let data = await this.$apiFun.getApi(
        this.$api.collectApi, {
        goodsId: this.concertDetail.id
      }
      )
      uni.hideLoading()
      uni.showToast({
        title: '已收藏',
        icon: 'none'
      })
      this.init()
      console.log('data---------', data)
    },
    // 取消收藏商品
    async uncollectFun() {
      let data = await this.$apiFun.delApi(
        this.$api.uncollectApi, [this.concertDetail.id])
      uni.hideLoading()
      uni.showToast({
        title: '已取消收藏',
        icon: 'none'
      })
      this.init()
    },
    closeBtn() {
      this.init()
      this.goodsCountApiFun()
    },
    // 提交下单接口
    submitBtn(val) {
      console.log('data---------', val)
    },
    goHome() {
      uni.reLaunch({
        url: '/pages/uni_Home'
      })
    },
    goCart() {
      uni.reLaunch({
        url: '/pages/uni_ranking'
      })
    },
    // 选择规格
    selectSpec(spec) {
      this.selectedSpec = spec;
    },
    // 减少数量
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--;
      }
    },
    // 增加数量
    increaseQuantity() {
      this.quantity++;
    },
    // 加购弹窗
    handleAdd() {
      this.concertDetail.TicketStr = this.TicketStr
      //specificationSelectionMode  0:捆绑组合模式 1:单独并行模式
      const data = JSON.parse(JSON.stringify(this.concertDetail))
      if (this.concertDetail.specificationSelectionMode == 0) {
        this.$nextTick(() => {
          this.$refs['likeModel0'].open(data, 'cart')
        })
      } else {
        this.$nextTick(() => {
          this.$refs['likeModel1'].open(data, 'cart')
        })
      }

    },
    // 立即购买
    async handleBuy() {
      this.concertDetail.TicketStr = this.TicketStr
      // if (this.login_status == 1) {
      // 	this.showPhone = true
      // 	return
      // }
      //specificationSelectionMode  0:捆绑组合模式 1:单独并行模式
      const data = JSON.parse(JSON.stringify(this.concertDetail))
      if (this.concertDetail.specificationSelectionMode == 0) {
        this.$nextTick(() => {
          this.$refs['likeModel0'].open(data, 'buy')
        })
      } else {
        this.$nextTick(() => {
          this.$refs['likeModel1'].open(data, 'buy')
        })
      }
    },
    openDesc() {
      this.$nextTick(() => {
        this.$refs['spec'].open(this.concertDetail.parameters)
      })
    },
  },
};
</script>
<style>
rich-text {
  color: rgba(255, 255, 255, .7);
}

page {
  width: 100%;
  height: 100%;
  background: #000000;
}
</style>
<style lang="less" scoped>
page {
  width: 100%;
  height: 100%;
  background: #000000;
}

.container {
  padding-bottom: 150rpx;
}

.container-box {
  padding: 0 20rpx;
  background: #000000;
  box-sizing: border-box;
  border-radius: 60rpx 60rpx 0 0;
  margin-top: -90rpx;
  position: relative;
}

.product-image {
  width: 100%;
  height: 360rpx;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  position: relative;
  z-index: 0;
  background: rgba(0, 0, 0, 1);

  .product-image-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 30rpx 25rpx;
    box-sizing: border-box;

    .product-image-box-swiper {
      width: 170rpx;
      height: 220rpx;
      border-radius: 6rpx;

      .swiper {
        width: 170rpx;
        height: 220rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        color: #a6a4a5;
        line-height: 60rpx;
        overflow: hidden;

        .product-image-box-img {
          border-radius: 6rpx;
          border: 1rpx solid rgba(255, 255, 255, 0.1);
          width: 100%;
          height: 100%;
          box-sizing: border-box;
        }
      }
    }

    .product-image-r {
      flex: 1;
      margin-left: 30rpx;
      color: white;

      .product-image-r-title {
        font-size: 30rpx;
        font-weight: bold;
        height: 140rpx;
      }

      .product-image-r-time {
        font-size: 28rpx;
      }

      .product-image-r-info {
        font-size: 28rpx;
        opacity: .7;
        margin-top: 5rpx;
      }
    }
  }
}

.image {
  width: 100%;
  height: 100%;
}

.product-info {
  box-sizing: border-box;
  padding: 10rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 6rpx;

  .product-info-l {
    font-size: 28rpx;
  }

  .product-info-r {
    margin-top: 10rpx;

    .product-info-r-img {
      width: 30rpx;
      height: 30rpx;
    }

    button {
      padding: 0;
      margin: 0;
      border: 1px solid transparent;
      background-color: transparent !important;
    }

    button::after {
      border: none;
    }

    .xcxkf::after {
      display: none;
      background-color: transparent !important;
      /* 去除按钮后的边框 */
    }

    /deep/.button-hover {
      background-color: transparent !important;
    }

    .xcxkfliimg::after {
      display: none;
      /* 去除按钮后的边框 */
    }
  }
}

.product-tag {
  font-size: 20rpx;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  margin-top: 5rpx;
}

.product-title {
  font-size: 36rpx;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}

.product-price {
  display: block;
  font-size: 20rpx;
  color: #e64340;
  font-weight: bold;

  .plan-price-text {
    font-size: 40rpx;
    margin: 0 5rpx;

  }
}

.product-specs {
  margin-top: 30rpx;
}

.specs-title {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 1);
  font-weight: bold;
}

.specs-list {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
}

.spec-item {
  padding: 15rpx 30rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.spec-item.active {
  border-color: #e64340;
  color: #e64340;
  background-color: #ffe6e6;
}

.product-quantity {
  margin-top: 30rpx;
}

.quantity-title {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 1);
  font-weight: bold;
}

.quantity-control {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
}

.quantity-btn {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  font-size: 32rpx;
  color: #666;
}

.quantity-value {
  margin: 0 30rpx;
  font-size: 32rpx;
  color: rgba(255, 255, 255, 1);
}

.shipping-info {
  margin-top: 30rpx;
}

.shipping-title {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 1);
  font-weight: bold;
}

.shipping-value {
  display: block;
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

/* 底部菜单栏 */
.bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background-color: #333333;
  border-top: 1rpx solid #333333;
  padding: 0 20rpx 25rpx 0;
  box-sizing: border-box;
  height: 150rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

  .menu-item {
    width: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: rgba(255, 255, 255, 1);
    position: relative;
  }

  .menu-item-active {
    color: #ff7e5f;
  }

  .spec-text-sum {
    position: absolute;
    top: -10rpx;
    right: 0rpx;
    padding: 2rpx 8rpx;
    border-radius: 15rpx;
    color: #ffffff;
    background: #f94d1b;
  }

  .menu-item .iconfont {
    font-size: 40rpx;
  }

  .menu-action {
    display: flex;
    justify-content: space-between;
  }

  .add-cart-btn,
  .buy-btn {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
    color: #fff;
    width: 480rpx;
  }

  .add-cart-btn {
    border-radius: 40rpx;
    background-image: linear-gradient(to right, #ff7e5f, #feb47b)
  }

  .buy-btn {
    border-radius: 0 40rpx 40rpx 0;
    background-image: linear-gradient(to right, #ff7e5f, #e64340)
  }

}

.menu-list {
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-top: 20rpx;
  border-radius: 10rpx;

  .menu-item {
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
  }

  .menu-text {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;

    .iconfont {
      margin-right: 5rpx;
      color: rgba(255, 255, 255, 1);
    }
  }

  .arrow-icon {
    width: 15rpx;
    height: 15rpx;
  }
}

.collect {
  // height: 125rpx;
  width: 100%;
  margin-top: 20rpx;
  border-radius: 10rpx;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  background: linear-gradient(to right top, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1));

  position: relative;

  .collect-top {
    border-radius: 0 0 70rpx 0;
    background: linear-gradient(to right top, #fff9ef, #ffeee4);
    position: absolute;
    left: 0;
    top: 0;
    width: 270rpx;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .collect-center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .collect-center-num {
      flex: 1;
      color: #fc9425;
      font-size: 55rpx;

      .collect-center-num-text {
        font-size: 20rpx;
        color: rgba(255, 255, 255, .7);
        margin-left: 5rpx;
      }
    }

    .collect-center-btn {
      width: 135rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to right top, #fcbe51, #fea338);
      border-radius: 50rpx;
      font-size: 20rpx;
      color: white;

      .iconfont {
        margin-right: 5rpx;
      }
    }

  }

  .swiper1 {
    height: 60rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    color: #a6a4a5;
    line-height: 60rpx;
    overflow: hidden;

    .swiper1View {
      white-space: nowrap;
    }
  }
}

.detail {
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 0 30rpx 20rpx 30rpx;
  background-color: rgba(255, 255, 255, .1);
  margin-top: 20rpx;

  .detail-title {
    height: 90rpx;
    font-size: 26rpx;
    box-sizing: border-box;
    line-height: 90rpx;
    color: rgba(255, 255, 255, 1);
  }

  .detail-box {
    font-size: 26rpx;
    color: rgba(255, 255, 255, .7);

    /deep/img {
      width: 100%;
      height: auto;
    }

  }

}

.popup-content {
  width: calc(100vw - 132px);
  padding: 20px;
  background-color: #1b1b1b;
  border-radius: 10px;

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: center;

    img {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }

    span {
      font-size: 16px;
      color: white;
    }
  }

  .content {
    font-size: 14px;
    color: white;
    text-align: center;
  }

  .btn {
    background: #f5cd47;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    height: 44px;
    text-align: center;
    line-height: 44px;
    margin-top: 20px;
  }
}

.lanmu {
  width: 100%;
  background-color: rgba(255, 255, 255, .1);
  border-radius: 10rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
  font-size: 26rpx;
  color: rgba(255, 255, 255, .7);
  height: 80rpx;
  display: flex;
  align-items: center;
}

// 置顶弹框
.like {
  width: 100%;
  background-color: rgba(255, 255, 255, .1);
  border-radius: 10rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-top: 20rpx;

  .like-tittle {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 1);
    justify-content: space-between;
    display: flex;
    align-items: center;

    .like-tittle-text {
      font-size: 26rpx;
      color: rgba(255, 255, 255, .7);
    }

    .like-tittle-img {
      width: 14rpx;
      height: 14rpx;
      margin-right: 10rpx;
    }

    .iconfont {
      font-size: 40rpx;
    }
  }

  .like-desc {
    font-size: 25rpx;
    color: rgba(255, 255, 255, .7);
    text-align: left;

    .like-desc-box {
      display: flex;
      align-items: flex-start;
      padding: 15rpx 0;
      box-sizing: border-box;

      .like-desc-box-t {
        width: 180rpx;
        color: rgba(255, 255, 255, .7);
      }

      .like-desc-box-b {
        color: rgba(255, 255, 255, .7);
      }
    }
  }


}
</style>